<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快速上手</title>
	<link rel="stylesheet" href="../../include/css/public.min.css">
	<link rel="stylesheet" href="../../include/css/iconfont.min.css">
	<link rel="stylesheet" href="../doc-lib/solarized-light.css">
	<link rel="stylesheet" href="../doc-lib/doc.css">
</head>
<body>
    <div class="page-cont">
	    <div class="crumb"></div>
        <div class="page-title">
			<h2>快速上手</h2>
			<p>提供两种方式让使用者快速上手，可根据需要选择合适的使用方式。</p>
		</div>
		<div class="section">
			<h4 class="section-title"><i class="iconfont icon-subtraction"></i> 目录结构</h4>
			<div class="section-cont">
				ARM UI 提供两种资源包（详情请移步 <a href="index.html">指南 → 开始使用</a>），解压后其目录结构分别如下：
				<div class="grid-row">
					<div class="grid-col grid-col-6">
						<strong>ARM UI 生产包</strong>
						<code>(armui_dist.zip)</code>
					</div>
					<div class="grid-col grid-col-6">
						<strong>ARM UI 开发包</strong>
						<code>(eastups-ARM-Web-master.zip)</code>
					</div>
				</div>
				<div class="grid-row">
					<div class="grid-col grid-col-6">
						<pre><code class="markdown">- [include]  /* 包含已压缩的页面公用资源，如js、css、fonts等 */
- favicon.ico  /* 浏览器地址栏小图标 */
- index.html   /* 入口网页文件（首页） */
- inner_page.html  /* 内页示例文件 */</code></pre>
					</div>
					<div class="grid-col grid-col-6">
						<pre><code class="markdown">/* 除包含开发包中所有资源外，还包括以下内容 */
- [pages]  /* ARM UI 的文档文件 */
- [source]  /* 包含页面公用资源的源码文件 */
- gulpfile.js  /* Gulp 任务配置文件 */
- package.json  /* 依赖包配置文件 */</code></pre>
					</div>
				</div>
				<p class="mt10">ARM UI 的整体页面结构由两部分组成：</p>
				<ul class="ml20">
					<li><strong>父级：</strong>实现导航功能，提供一个 <code>iframe</code> 容器，用来调用并显示子页面。即上面的 <code>index.html</code> 文件。</li>
					<li><strong>子页面：</strong>或称内页，是实现软件功能的一众业务页面，根据父级的调用（点击导航）显示在父级，响应用户操作，完成各个业务功能。例如上面的 <code>inner_page.html</code> 文件。</li>
				</ul>
				<p>而 <code>include</code> 文件夹下的资源，就是上述两部分中页面所调用的各种公用资源，包含CSS样式表、JS脚本、iconfont字体文件、图片等。</p>
			</div>
		</div>
		<div class="section">
			<h4 class="section-title"><i class="iconfont icon-subtraction"></i> 使用方法</h4>
			<div class="section-cont">
				<div class="grid-row">
					<div class="grid-col grid-col-6">
						<strong>ARM UI 生产包</strong>
						<code>(armui_dist.zip)</code>
					</div>
					<div class="grid-col grid-col-6">
						<strong>ARM UI 开发包</strong>
						<code>(eastups-ARM-Web-master.zip)</code>
					</div>
				</div>
				<div class="grid-row">
					<div class="grid-col grid-col-6">
						<ol class="ml20">
							<li>将所有文件及文件夹复制到项目中；</li>
							<li>根据实际需要修改 <code>index.html</code> 中的标题名称（项目名称）；</li>
							<li>按照 <code>inner_page.html</code> 中的 HTML 结构编写内页（业务页面）；</li>
							<li>编写业务页面时，需要注意引用资源的相对路径填写正确；</li>
							<li>如需在页面上使用某个组件，请参阅 <a href="../unit/base.html">组件</a> 栏目下对应组件的使用文档；</li>
							<li>业务页面编写完毕后，定位到 <code>include → js</code> 目录，找到 <code>nav.json</code> 文件，该文件是导航配置文件，请根据实际情况编写、修改。其中：
								<ul class="ml20">
									<li><em>name：</em>该字段设置导航项目的名称；</li>
									<li><em>icon：</em>该字段设置导航项目的小图标，填写图标名称即可（详情参阅 <a href="../unit/icon.html">组件 → 图标</a>）；
										<blockquote>注：小图标只对一级导航有效</blockquote>
									</li>
									<li><em>url：</em>该字段设置导航项目的链接地址，指向对应的业务页面；</li>
									<li><em>base：</em>该字段只对包含二级导航的一级导航有效，可设置一个基准地址，所有二级导航的 <em>url</em> 均按此地址作为上级地址；</li>
									<li><em>subNav：</em>该字段设置一级导航下的二级导航内容。</li>
								</ul>
							</li>
						</ol>
					</div>
					<div class="grid-col grid-col-6">
						使用开发包，解锁 ARM UI 的高级使用姿势，提升效率，详情请移步 <a href="build.html">指南 → 自动化构建</a>
					</div>
				</div>
			</div>
		</div>
    </div>
    <script src="../../include/js/jquery-1.11.3.min.js"></script>
    <script src="../../include/js/public.min.js"></script>
    <script src="../doc-lib/highlight.pack.js"></script>
	<script src="../doc-lib/doc.js"></script>
    <script>
		hljs.initHighlightingOnLoad();
    </script>
</body>
</html>
